<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <!--公用头部-->
    <th:block th:replace="common/head::commonHead('系统日志-小邑')" />
    <style>
        .layui-tab-card {
            border-width: 1px;
            border-style: solid;
            border-radius: 2px;
            box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
        }
        .layui-badge-rim, .layui-border, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-layedit, .layui-layedit-tool, .layui-panel, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea{
            border-color: #eee;
        }
    </style>
</head>
<!--公用js-->
<th:block th:replace="common/head::commonJs"/>
<body marginwidth="0" marginheight="0">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" id="logForm">
                <div class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">操作人</label>
                            <div class="layui-input-inline">
                                <input id="createUserName" name="createUserName" class="layui-input" autocomplete="off"
                                       type="text" placeholder="请输入操作人"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">访问时间</label>
                            <div class="layui-input-inline" style="width: 300px;">
                                <input id="dateRange" name="dateRange" class="layui-input date-icon" autocomplete="off"
                                       type="text" placeholder="请选择访问时间范围"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" id="searchBtn"
                                    class="xy-btn xy-btn-primary icon-btn xy-btn-sm">
                                <i class="layui-icon">&#xe615;</i> 搜索
                            </button>
                        </div>
                        <div class="layui-inline" style="float: right;margin-top: 3px;">
                            <button sec:authorize="hasPermission('/sysLog/deleteAll','sysLog:deleteAll')"  type="button" id="deleteBtn"
                                    class="xy-btn xy-btn-danger icon-btn xy-btn-sm">
                                <i class="layui-icon">&#xe640;</i> 日志清空
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">登录日志</li>
                    <li>操作日志</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <table class="layui-hide" id="loginTable" lay-filter="loginTable"></table>
                        <script type="text/html" id="login-bar">
                            {{#if (d.isException == 0) { }}
                            <button class="xy-btn xy-btn-sm xy-btn-success" lay-event="edit"><i class="layui-icon layui-icon-ok"></i>
                                成功</button>
                            {{# }else if(d.isException == 1){ }}
                            <button class="xy-btn xy-btn-sm xy-btn-danger" lay-event="error"><i class="layui-icon layui-icon-help"></i>
                                异常</button>
                            {{# } }}
                        </script>
                    </div>
                    <div class="layui-tab-item">
                        <table class="layui-hide" id="logTable" lay-filter="logTable"></table>
                        <script type="text/html" id="log-bar">
                            {{#if (d.isException == 0) { }}
                            <button class="xy-btn xy-btn-sm xy-btn-success" lay-event="edit"><i class="layui-icon layui-icon-ok"></i>
                                成功</button>
                            {{# }else if(d.isException == 1){ }}
                            <button class="xy-btn xy-btn-sm xy-btn-danger" lay-event="error"><i class="layui-icon layui-icon-help"></i>
                                异常</button>
                            {{# } }}
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['table', 'layer', 'jquery', 'util', 'element', 'laydate'], function () {
        var layer = layui.layer
            , table = layui.table
            , $ = layui.jquery
            , element = layui.element
            , laydate = layui.laydate
            , util = layui.util;
            util.fixbar({
                top: true //返回顶部
                , css: { right: 50, bottom: 50 }
                , bgcolor: '#3b7cd8'
                , click: function (type) {

                }
            });
        //日期选择器
        laydate.render({
            elem: '#dateRange',
            type: 'datetime',
            range: true,
            theme: '#393D49'
        });
        var loginTable = table.render({
            elem: '#loginTable'
            ,method:'post'
            ,url: basePath + '/sysLog/list?taskType=1' //数据接口
            ,page: true //开启分页
            ,cellMinWidth: 100
            ,cols: [ [ //表头
                {type: 'checkbox', fixed: 'left',hide: true}
                ,{field: 'id',hide:true,title:'ID'}
                ,{field: 'logType', title: '日志类型',align:"center",width:100}
                ,{field: 'createUserCode', title: '创建用户编码',hide: true}
                ,{field: 'requestMethod', title: '请求方式',align:"center",width:100}
                ,{field: 'requestUrl', title: '接口',align:"center"}
                ,{field: 'description', title: '描述',align:"center"}
                ,{field: 'browserName', title: '浏览器',align:"center",width:120}
                ,{field: 'requestParams', title: '请求参数',hide: true}
                ,{field: 'requestIp', title: '操作地址',align:"center",width:150,minWidth:150}
                ,{field: 'serverAddress', title: '请求服务器地址',hide: true}
                ,{field: 'exceptionInfo', title: '异常信息',hide: true}
                ,{field: 'startTime', title: '开始时间',hide: true}
                ,{field: 'endTime', title: '结束时间',hide: true}
                ,{field: 'executeTime', title: '执行时间',hide: true}
                ,{field: 'userAgent', title: '用户代理',hide: true}
                ,{field: 'deviceName', title: '操作系统',align:"center",width:280}
                ,{field: 'createDate', title: '访问时间',align:"center",width:180}
                ,{field: 'createUserName', title: '操作人',align:"center",width:120}
                ,{field: 'isException', title: '是否异常',align:"center",width:120,templet:"#log-bar"}
            ] ]
            ,limit: 10
            ,limits: [10, 20, 50, 100]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [  'prev', 'page', 'next', 'skip','count','limit'] //自定义分页布局
                ,curr: 1 //设定初始在第 5 页
                , groups: 5 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
                , theme:"#1E9FFF"
            }
        });
        var logTable = table.render({
            elem: '#logTable'
            ,method:'post'
            ,url: basePath + '/sysLog/list?taskType=2' //数据接口
            ,page: true //开启分页
            ,cellMinWidth: 100
            ,cols: [ [ //表头
                {type: 'checkbox', fixed: 'left',hide: true}
                ,{field: 'id',hide:true,title:'ID'}
                ,{field: 'logType', title: '日志类型',align:"center",width:100}
                ,{field: 'createUserCode', title: '创建用户编码',hide: true}
                ,{field: 'requestMethod', title: '请求方式',align:"center",width:100}
                ,{field: 'requestUrl', title: '接口',align:"center"}
                ,{field: 'description', title: '描述',align:"center"}
                ,{field: 'browserName', title: '浏览器',align:"center",width:120}
                ,{field: 'requestParams', title: '请求参数',hide: true}
                ,{field: 'requestIp', title: '操作地址',align:"center",width:150,minWidth:150}
                ,{field: 'serverAddress', title: '请求服务器地址',hide: true}
                ,{field: 'exceptionInfo', title: '异常信息',hide: true}
                ,{field: 'startTime', title: '开始时间',hide: true}
                ,{field: 'endTime', title: '结束时间',hide: true}
                ,{field: 'executeTime', title: '执行时间',hide: true}
                ,{field: 'userAgent', title: '用户代理',hide: true}
                ,{field: 'deviceName', title: '操作系统',align:"center",width:280}
                ,{field: 'createDate', title: '访问时间',align:"center",width:180}
                ,{field: 'createUserName', title: '操作人',align:"center",width:120}
                ,{field: 'isException', title: '是否异常',align:"center",width:120,templet:"#log-bar"}
            ] ]
            ,limit: 10
            ,limits: [10, 20, 50, 100]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [  'prev', 'page', 'next', 'skip','count','limit'] //自定义分页布局
                ,curr: 1 //设定初始在第 5 页
                , groups: 5 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
                , theme:"#1E9FFF"
            }
        });

        // 搜索
        $('#searchBtn').on('click',function () {
            var formData = getFormData('logForm');
            if (utils.string.isEmpty($("#dateRange").val())){
                formData.sDate = $("#dateRange").val().split(" - ")[0];
                formData.eDate = $("#dateRange").val().split(" - ")[1];
            }
            loginTable.reload({
                where: formData
            });
            logTable.reload({
                where: formData
            });
        });

        //日志清空
        $('#deleteBtn').on('click',function () {
            layer.confirm('确定要清空吗？',{icon:5, title:'提示',skin: 'layer-ext-myskin'}, function(index) {
                layer.close(index);
                var loadIndex = null;
                sendAjaxPostToCallback(
                    basePath+ '/sysLog/deleteAll', {},
                    function (data) {
                        if (data.success) {
                            // 提示信息
                            top.layui.notice.msg(data.msg ,{icon: 1,position:"topCenter"});
                            table.reload('loginTable',{
                                page:{curr:1}
                            });
                            table.reload('logTable',{
                                page:{curr:1}
                            });
                        } else {
                            top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                        }
                    },
                    function (data) {
                        if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                            layui.msg(data.msg ,{icon: 2,position:"topCenter"});
                        }else{
                            top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                        }
                    },
                    function () {
                        loadIndex = layer.load(1);
                    },
                    function () {
                        layer.close(loadIndex);
                    },
                )
            });
        });
    });
</script>
</body>
